import React from 'react';
import { Table, Input, Button, Space, Tooltip } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';

const DataTable = ({
  columns,
  dataSource,
  loading = false,
  rowKey = 'id',
  pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条记录`,
  },
  onChange,
  searchPlaceholder = '请输入搜索内容',
  onSearch,
  onRefresh,
  rowSelection,
  scroll,
  ...restProps
}) => {
  const handleSearch = (value) => {
    if (onSearch) {
      onSearch(value);
    }
  };

  const handleRefresh = () => {
    if (onRefresh) {
      onRefresh();
    }
  };

  return (
    <div className="data-table-wrapper">
      {onSearch && (
        <div className="data-table-header" style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
          <Space>
            <Input.Search
              placeholder={searchPlaceholder}
              allowClear
              onSearch={handleSearch}
              style={{ width: 250 }}
            />
          </Space>
          {onRefresh && (
            <Tooltip title="刷新">
              <Button
                icon={<ReloadOutlined />}
                onClick={handleRefresh}
              />
            </Tooltip>
          )}
        </div>
      )}
      <Table
        columns={columns}
        dataSource={dataSource}
        loading={loading}
        rowKey={rowKey}
        pagination={pagination}
        onChange={onChange}
        rowSelection={rowSelection}
        scroll={scroll}
        {...restProps}
      />
    </div>
  );
};

export default DataTable;